Hace unos días me preguntaba Graciela por el efecto que tiene la imagen de la sidebar "Blog de la semana" le respondí pero me pareció que un comentario no da para ejemplos y como también me preguntan por el efecto de la arroba del logo y es el mismo  pues  aquí va una respuesta más detallada.

(15deg)

(90deg)



(360deg)

El HTML lo añadimos donde vamos a mostrar el efecto de la siguiente forma:

<div class="imagerotate">
<a href="URL-ENLACE"><img alt="" src="URL-IMAGEN" /></a>
</div>

Si no queremos que la imagen sea un enlace añadimos sólo el código para imagen y la clase imagerotate.
<div class="imagerotate">
<img src="URL-IMAGEN"/>
</div>

Y los estilos justo antes de ]]></b:skin> 

.imagerotate img {
-moz-border-radius:5px;
-moz-transition: -moz-transform 1s ease 0s;
background:#B292A9 !important;
border: 1px solid #ffffff !important;
border-radius: 5px 5px 5px 5px;
height: 150px; margin: 5px;
padding: 0px;
position: relative;
width: 220px;
}

.imagerotate img:hover {
background:#AD184E !important;
-moz-transform:rotate(5deg);
-o-transform:rotate(5deg);
-webkit-transform:rotate(5deg);
-ms-transform:rotate(15deg);
}

Según deseamos que el movimiento de un giro mayor aumentamos o disminuimos el valor de  (deg)
La referencia de esta entrada es de Vagabundia que nos muestra otras transformaciones con CSS






Rafire Rocks

Hola Gema.

Que pena comentarte en una entrada que no corresponde pero en la que comenté no aparece mi comentario. ¿Cómo hago para que en las entradas en miniatura, leer más, el título aparezca al lado de la imagen y no encima, tal como tu lo tienes?

http://cortosdigitaltv.blogspot.com/

Un saludo.

Responder
Abraham

Que mal, ya comentaron. :'(

Hace exactamente 1 segundo no estaba el comentario, pero bueno... Siempre me he preguntado, también, aparte de que rote la imagen, cómo es que le haces para que aparezca la imágen de la lupita?

Es respecto a el Blog de la Semana.

Hojala que hagas una entrada que también trate sobre lo que te digo.
Bueno, hasta la próxima entrada:)

Responder
Johnny Uve

Hola, Gema, me ha encantado el efecto "imagerotate". Lo he puesto en mi blog 'Johnny y LA TELE' para enlazar unas imagenes a paginas. He probado a poner el estilo y el div todo junto en el gadget, y funciona bien. Pasate por mi blog cuando quieras. Saludos estivales.

Responder
Unknown

Gracias, gracias amiga, estaba muy intrigada y encantada del efecto :P

::: (\_(\
*: (=’ :’) :*
•.. (,(”)(”)¤°.¸¸.•´¯`»Buen fin de semana y besos!

Responder
EpideMia

muy muy bueno gema!!

tenia un menú hecho con imagenes que hace rato que le queria hacer algo que resalte, pero sutil.

eso me vino barbaro!!

cuando quieras fijate como quedó.


gracias como siempre!!

Responder
Cocina

Hola Gem@ estuve probando este efecto y queda muy bonito,solo que la imagen no me aparece con su tamaño real,pierde su tamaño original y me queda de un tamaño muchisimo nenor,como puedo solucinarlo.
gracias.

Responder
María Pilar

Hola Gema, siempre me ha gustado hacer clic en la foto del blog de la semana para ver el efecto. Lo hago una y otra vez porque me fascina.

Responder
María Pilar

También me gustaría poner en mi blog el widget de Face con las personas a las que les gusta. Me encanta como queda el tuyo. Gracias Gema.

Responder
Cocina

Creo haber encontrado la solucion a la que te hacia referencia,quintando de los estilos
height: 150px;
width: 220px;
de esta forma el efecto se me adapta a diferentes tamaños de imagenes,podrias decirme si es lo correcto ?
y con respecto a la lupa,yo tengo insatalado el truco /gemablog-.blogspot.com/2009/06/anadiendo-una-lupa.html/ para ventana modal,se puede añadir este estilo al codigo de Girar imagenes?
muchas gracias!

Responder
Beben Koben

you and vagabundia same posted tema :$ :D

Responder
Gem@

:: Rafire Rocks no es tan sencillo como mover el título con unos margenes porque están las categorías por medio, sería necesario mover la parte de las categorías y situarlas encima del título para luego con unos margenes ir acomodando el título al contenido.

Aunque los pasos que hay son para una plantilla Minima te servirán de referencia para ubicarte :)
http://gemablog-.blogspot.com/2009/05/recuperar-datos-en-post-footer.html


:: Abraham Santos prueba a poner la lupa en los estilos de esta forma:

.imagerotate img:hover {
cursor: url("url-imagen"), pointer;
..........
..........
..........
}

:: Saludos Johnny me gustó como queda ha sido una buena idea para animar los enlaces :)

:: Hola Graciela!! feliz semana :D :D por aquí muy calurosa 43 grados que no dejan ni respirar :S

:: EpideMia me gusta como queda pero, ¿has notado que la ventana modal de apertura parece que lo hace más lento o es mi conexión?

:: Cocofansclub no había visto tu comentario anterior y estuve buscando el posible error sin ver nada pero me alegra que ya lo tengas solucionado. Referente a la lupa mira la respuesta para Abraham :)

:: m.p.moreno el widget puedes añadirlo de forma muy sencilla ,en un gadget de html añades lo siguiente:
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/es_LA" type="text/javascript"></script><script type="text/javascript">FB.init("1b8f0f706c312c05f42224b5b3399f80");</script><fb:fan connections="22" width="225" profile_id="XXXXXXXXXXXX" stream=""></fb:fan>

Debes sustituir la id, o mejor dicho cambiar donde dice id="XXXXXXXXXXXX por la id de tu page que será la que encuentres en la barra del navegador una vez que accedes a editar.

:: Beben Koben it does not read good ;)

Responder
EpideMia

lo de la ventana modal me lo han comentado. yo la verda que no lo noto. pero no se si es porque entro tantas veces que ya parece que se carga instantaneamente. quise sacar usar una especie de bienvenida que enseñan en cidudadblogger, pero no tuve tiempo. en cuanto pueda me pongo con eso.

que bueno que te halla gustado. es muy valioso que alguien como vos se tome el tiempo de su opinion de como nos quedan las cosas.


como siempre muchas gracias Gema!!!

Responder
Cocina

Muchas gracias Gem@ :D pude lograr el efecto.
saludos!y buena semana!

Responder
Gem@

:: EpideMia si no lo notas entonces no veo problema :)

:: Genial Cocofansclub ;)

Responder
María Pilar

Hola Gema! Muchas gracias por tu respuesta, lo intentaré como siempre. Acabo de llegar y veo como se me ha acumulado el trabajo; pero me encanta encontrarte al pie del cañón, como siempre. Eres un sol. :)

Responder
Unknown

Este efecto del blog de la semana me encsntaba :) gracias por explicarlo ya que lo aplicaré en algun lugarcito de mi blog ya que lo encuentro muy llamativo y sencillo a la vez :D

muchos besos ronroneados en mi abrazo ^_^

Responder
Gem@

:: Hola Pau ¿cómo estás gatita? me alegra que te guste el efecto :)
Otro montón de besos para ti ;)

Responder
Patricia

¡Hola Gema!

Gracias por el aporte, funciona perfectamente. Tan solo un detalle, cuando paso el cursor para ver el efecto la imagen pierde calidad, se ve un tanto borrosa. ¿Hay alguna forma de arreglarlo?

¡Gracias!

Responder
Talismán Dreams

Gema, las imágenes se añaden en un gadget html ¿no? Es que lo hago así, pero las imágenes me no me aparecen con el tamaño del efecto, ni se mueven lo más mínimo...

Muchas gracias por toda tu ayuda :)

Responder
Talismán Dreams

Ya está solucionado :) Se me había colado un signo antes de ]]>

Un besito!

Gem@

Estupendo, me alegra que ya esté solucionado :)

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top